<template>
  <div>
    <van-nav-bar title="首頁"/>
    <van-swipe :autoplay="5000" height="300">
      <van-swipe-item v-for="(item, index) in 4" :key="index">
        <img :src="require('../../assets/img/0'+(index+1)+'.jpg')" alt=""  class="swipeImg">
        </van-swipe-item>
    </van-swipe>
    <div class="class-title">熱門視頻</div>
    <van-grid column-num="3" :gutter="12">
        <van-grid-item icon="photo-o" v-for="(item,index) in 6" :key="item">
              <div @click="goInfo(index)">
                  <img :src="require('../../assets/img/0'+(item+1)+'.jpg')" alt=""  class="gridImg">
                  <div class="HotText">{{Hot[index]}}</div>
              </div>
        </van-grid-item>
    </van-grid>
      <!-- <div @click="goWindow">新页面打开指定页面</div>
    <createElement>
        <template>
            插入文字    
        </template>    
    </createElement>    -->
    <div class="class-title">熱門分類</div>
    <van-grid square class="bottomBox">
         <van-grid-item v-for="(item,index) in classify" use-slot  :key="item" @click="onclick(index)">
              <img :src="require('../../assets/img/0'+(index+1)+'.jpg')" alt=""  class="swipeImg">
              <div class="fontSize">{{item}}</div>
         </van-grid-item>
    </van-grid>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:"Home",
    components:{},
    created(){
        axios.get('/looks').then(res=>{
            console.log(res)
        })
    },
    data(){
        return{
            loading:true,
            Hot:["東京很熱11","東京很熱12","東京很熱13","東京很熱14","東京很熱15","東京很熱16"],
            classify:["亞洲","歐洲","南美洲","北美洲","大洋洲","非洲","澳洲","雙飛"],
        }
    },
    mounted () {
       this.$pluginDemo(1); 
    },
    methods:{
        goWindow(){
            let path=this.$router.resolve('userInfo')
            window.open(path.href)
        },
       goInfo(item){
           this.$router.push({name:'videoInfo',query:{name:this.Hot[item]}})
       },
       onclick(index){
        this.$store.commit('setFootActive', 1)
        this.$router.push({name:'videoList',params:{index:index}})
       }
    }
}
</script>

<style lang="scss" scoped>
body {
    margin: 0;
  }
/deep/.van-swipe__indicator{
    width: 12px !important;
    height: 12px !important;
}
    .swipeImg{
            width: 100%;
            height: 100%;
        
    }
    .fontSize{
        font-size: 16px;
    }
    .HotText{
        font-size: 16px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .gridImg{
        width: 90px;
        height: 120px;
    }
    .class-title{
        margin-bottom: 10px;
        margin-left:20px;
         font-size:20px;
         margin-top:20px;
    }
    .bottomBox{
        padding-bottom: 60px;
    }
</style>